<template>
  <div>
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <!-- 谁调用组件，谁就传luboList，涉及到父子组件传值 -->
      <mt-swipe-item v-for="item in lunboList" :key="item.url">
        <a :href="item.url">
          <!-- 主页轮播图中使用的是item.img，但是主页我自定义了一个图片数组，所以这里可以直接用src，不用循环遍历每一项，将item.src赋值给item.img -->
          <img :src="item.src" :class='{"full":isfull}' >
        </a>
      </mt-swipe-item>
    </mt-swipe>
    <!-- 轮播图分歧点是首页需要100%，商品需要自适应 -->
  </div>
</template>

<script>
export default {
  /* 定义自定义属性，使用class属性绑定，传值，当100%时，返回true，启用类名，否则返回false */
  props: ["lunboList", "isfull"]
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  text-align: center;
  width: 100%;
  height: 240px;
  .mint-swipe-item {
    img {
      // width: 100%;
      height: 100%;
    }
  }
  .full {
    width: 100%;
  }
}
</style>

